<template>
    <div>
        <div>
            <el-butoon type="primary" @click="save">添加</el-butoon>
            <el-button type="danger" @click="del">删除选中</el-button>
        </div>
        <div>
            <el-select v-model="page.size" placeholder="页数">
                <el-option v-for="item in page.pageSize" :key="item.id" :value="item.id" label="item.title"></el-option>
            </el-select>
            <el-select placeholder="操作类型">
                <el-option></el-option>
            </el-select>
            <el-select placeholder="任务状态">
                <el-option></el-option>
            </el-select>
            <el-button type="success">搜索</el-button>
            <el-button type="warning">重置</el-button>
        </div>
        <div>
            <el-table ref="filterTable" :data="tableData.operates" style="width: 100%">
                <el-table-column type="expand">
                </el-table-column>
                <el-table-column label="任务id">
                </el-table-column>
                <el-table-column label="任务类型">
                </el-table-column>
                <el-table-column label="操作源">
                </el-table-column>
                <el-table-column label="任务进度">
                </el-table-column>
                <el-table-column label="任务状态">
                </el-table-column>
                <el-table-column prop="createTime" label="日期" sortable width="180" :formatter="dateFormatter">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="query(scope.row)">详情</el-button>
                        <el-button type="warning" @click="update(scope.row)">更新</el-button>
                        <el-button type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="reportfont">
            <el-pagination :page-size="page.size" @current-change="handleCurrentChange" background
                layout="prev, pager, next" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //展示数据
            tableData: {
                demo: [],
                detail:{}
            },
            //提交数据
            params: {
                list:[],
                detail:{}
            },
            //条件查询
            condition: {},
            //分页
            page: {
                size: 10,
                current: 1,
                total: 100,
                pageSize:[
                    {
                        id:10,
                        title:'10条/页'
                    },
                    {
                        id:30,
                        title:'30条/页'
                    },
                    {
                        id:50,
                        title:'50条/页'
                    }
                ]
            },
            //弹窗控制
            windows: {}
        }
    },
    methods: {
        save(){

        },
        del(){

        },
        update(){

        },
        query(){

        },
        queryList(){

        },
        init() {

        }
    },
    created() {
        this.init()
    }
}
</script>

<style scope>
.reportfont {
    margin: 0 auto;
    text-align: center;
}
</style>